<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CMS登录</title>
    <link href="/cms/frame/bootstrap-4.6.2-dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }
        html, body, #container {
            width: 100%;
            height: 100%;
        }
        #container {
            background-color: #f7f7f7;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url("../imgs/bg4.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        #loginContainer {
            border: 1px solid gainsboro;
            border-radius: 10px;
            padding: 30px 30px 10px 30px;
        }
        #loginContainer h1 {
            width: 100%;
            text-align: center;
            font-size: 30px;
            font-family: "宋体";
            height: 40px;
            color: white;
        }
        #code {
            margin-right: 5px;
        }
        .btnContainer {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .btnContainer button {
            width: 400px;
        }
        .aContainer {
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #loginContainer a {
            font-size: 12px;
            color: white;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="loginContainer">
        <div id="loginContent">
            <h1>CMS用户登录</h1>
            <form id="loginForm" method="post">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">账&nbsp;&nbsp;&nbsp;&nbsp;号:</span>
                    </div>
                    <input type="text" class="form-control" id="userName" name="userName">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">密&nbsp;&nbsp;&nbsp;&nbsp;码:</span>
                    </div>
                    <input class="form-control" type="password" name="userPwd" id="userPwd">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">验证码:</span>
                    </div>
                    <input class="form-control" id="code" name="code">
                    <div class="input-group-append">
                        <img src="/cms/codeController/code" onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha">
                    </div>
                </div>
                <div class="input-group mb-3">
                    <div class="btnContainer">
                        <button type="button" id="btnLogin" class="btn btn-success">登录</button>
                    </div>
                </div>
                <div class="input-group aContainer">
                    <a href="">注册</a>
                    <a href="">忘记密码</a>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <span id="msg"></span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

</body>
<script src="/cms/frame/js/jquery-3.7.1.min.js"></script>
<script src="/cms/frame/bootstrap-4.6.2-dist/js/bootstrap.min.js"></script>
<script>
    jQuery(function (){
        jQuery("#btnLogin").click(function (){
            // 输入验证
            let userName = jQuery("#userName").val().trim();
            let userPwd = jQuery("#userPwd").val().trim();

            if (userName === "") {
                jQuery("#msg").html("账号不能为空!");
                $('#myModal').modal('show');
                return;
            }

            if (userPwd === "") {
                jQuery("#msg").html("密码不能为空!");
                $('#myModal').modal('show');
                return;
            }
            let data = jQuery("#loginForm").serialize();
            jQuery.post("/cms/AdminController/checkLogin", data, function (rst) {
                if (rst.code == 200) {
                    location.href = "/cms/html/admin/main.html";
                    sessionStorage.setItem("info", JSON.stringify(rst.data));
                } else {
                    jQuery("#msg").html(rst.msg);
                    $('#myModal').modal('show');
                }
            });
        });
    });
</script>
</html>
